Conditional Content

Users can build dynamic content which is displayed based on the value of specific product attributes.

Display Item Price as Strikethrough

When a product is returned through the recommendation API, if the price for the item has reduced compared to its original price, you can display the original price with a strikethrough.

For example, if a user is browsing a list of recommended products on an e-commerce website, one of the recommended products is a pair of shoes. The original price of the shoes was $100, but due to a sale or discount, the price has been reduced to $80. When displaying this item in the recommendation list, you would show $100 with a strikethrough, and display the reduced price of $80 adjacent to it.

To display the item price as strikethrough:

On the Active content page, click + Create active content. The Create active content page is displayed.
On the Content tab, under Content styling, drag the HTML block to the workspace.
In the HTML block, use the following code:

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style="text-align:center;display:inline-block" ng-if="{API.Category_TopSelling_Recs.salePriceCents} != undefined">
<div ng-if="{API.Category_TopSelling_Recs.priceCents} != undefined">
<div ng-if="{API.Category_TopSelling_Recs.salePriceCents} < {API.Category_TopSelling_Recs.priceCents}" style="width:100%;flex-wrap: nowrap;">
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#CC0000;font-size:20px;text-align:center;font-family:TT Norms bold;">
En solde
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#CC0000;font-size:20px;text-align:center;font-family:TT Norms bold;">
On sale
</div>
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#000000;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;<s>{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'fr-ca' }}</s>
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#000000;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;<s>{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'en-ca' }}</s>
</div>
</div>
<div ng-if="{API.Category_TopSelling_Recs.salePriceCents} >= {API.Category_TopSelling_Recs.priceCents}" style="width:100%;flex-wrap: nowrap;">
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#444444;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'fr-ca'}}
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#444444;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'en-ca'}}
</div>
</div>
</div>
</div>

This code checks if the product’s sale price is less than the product price. If it is true, then it shows the product price as strikethrough; otherwise, it shows the product. For example, if the product price is 100 dollars and the sale price is 80 dollars, it shows the product price as strikethrough.

Show On-Sale Image Badge

When a product is returned through the recommendation API, if the item is currently on sale or has a special discount, you can overlay an image badge on top of the item's image to visually indicate that it is on sale.

For example, continuing with the previous example, let's say another recommended product is a jacket. This jacket is currently on sale with a 20% discount. When displaying the jacket in the recommendation list, you would overlay a badge (such as a "Sale" badge or a badge indicating the discount percentage) on top of the jacket's image. This badge catches the user's attention and informs them that the jacket is on sale.

To show an on-sale image badge if the on-sale product attribute is true:

On the Active content page, click + Create active content. The Create active content page is displayed.
On the Content tab, under Content styling, drag the HTML block to the workspace.
In the HTML block, use the following code:

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style="text-align:center;display:inline-block" ng-if="{API.Category_TopSelling_Recs.salePriceCents} != undefined">
<div ng-if="{API.Category_TopSelling_Recs.priceCents} != undefined">
<div ng-if="{API.Category_TopSelling_Recs.salePriceCents} < {API.Category_TopSelling_Recs.priceCents}" style="width:100%;flex-wrap: nowrap;">
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#CC0000;font-size:20px;text-align:center;font-family:TT Norms bold;">
En solde
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#CC0000;font-size:20px;text-align:center;font-family:TT Norms bold;">
On sale
</div>
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#000000;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;<s>{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'fr-ca' }}</s>
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#000000;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;<s>{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'en-ca' }}</s>
</div>
</div>
<div ng-if="{API.Category_TopSelling_Recs.salePriceCents} >= {API.Category_TopSelling_Recs.priceCents}" style="width:100%;flex-wrap: nowrap;">
<div ng-if="'{TagParam.regionId}' == 'fr_CA'" style="color:#444444;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'fr-ca'}}
</div>
<div ng-if="'{TagParam.regionId}' != 'fr_CA'" style="color:#444444;font-size:20px;text-align:center;font-family:TT Norms bold;">
&nbsp;{{ {API.Category_TopSelling_Recs.priceCents}/100 | customLocale: 'en-ca'}}
</div>
</div>
</div>
</div>

This code checks if the product.On-sale parameter is true. If it is true, then the on-sale image will be displayed as an overlay on top of the product image.

Display body text based on the preferred language

Display the content based on the preferred language of the customer. Language value is coming as a tag parameter for conditional check.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align: justify;display:inline-block;font-size: 18px;padding:5px; padding-left:25px;font-family:Nunito Sans;letter-spacing: 2px;">
<div ng-if="'{TagParam.language}' == 'CASTELLANO'">
Aquí tienes tu <b>nueva oferta personalizada</b> y los descuentos exclusivos de este mes. ¡Disfrútalos ahorrando!
</div>
<div ng-if="'{TagParam.language}' == 'CATALAN'">
Ací tens la teva <b>nova oferta personalitzada</b> i els descomptes exclusius d'aquest mes.Gaudeix-los estalviant!
</div>
<div ng-if="'{TagParam.language}' == 'VALENCIANO'">
Ací tens la teua <b>nova oferta personalitzada</b> i els descomptes exclusius d'este mes. Disfruta´ls estalviant!
</div>
</div>

Display banner image based on the preferred language

Preference language is coming from tag parameter. Language wise banner images and click-through URL are stored in a DME named OTROSCONTENIDOS_L.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align: left;display:inline-block;font-size: 15pxfont-family:Nunito Sans;">
  <div ng-if="'{TagParam.language}' == 'CASTELLANO'">
    <a href="{Model.OTROSCONTENIDOS_L.bannner_link_url_e}" target="_blank"><img src="{Model.OTROSCONTENIDOS_L.banner_image_e}" width="600"></a>
  </div>
  <div ng-if="'{TagParam.language}' == 'CATALAN'">
    <a href="{Model.OTROSCONTENIDOS_L.bannner_link_url_c}" target="_blank"><img src="{Model.OTROSCONTENIDOS_L.banner_image_c}" width="600"></a>
  </div>
  <div ng-if="'{TagParam.language}' == 'VALENCIANO'">
    <a href="{Model.OTROSCONTENIDOS_L.bannner_link_url_v}" target="_blank"><img src="{Model.OTROSCONTENIDOS_L.banner_image_v}" width="600"></a>
  </div>
</div>

Display product description based on the language

Preference language is coming from tag parameter. Language wise product description stored in a DME named MY_MAESTRO12CC.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align: center;display:inline-block;width:200px;border:1px solid #EEEEE;font-size: 16px;padding:5px; padding-left:5px;height:70px;font-family:Nunito Sans;">
  <div ng-if="'{TagParam.language}' == 'CASTELLANO'">
    {Model.MY_MAESTRO12CC.descripcion_castellano}
  </div>
  <div ng-if="'{TagParam.language}' == 'CATALAN'">
    {Model.MY_MAESTRO12CC.descripcion_catalan}
  </div>
  <div ng-if="'{TagParam.language}' == 'VALENCIANO'">
    {Model.MY_MAESTRO12CC.descripcion_valenciano}
  </div>
</div>

Display image based on the segmentation code value 'codigo_de_segmentacion' and the language

If segmentation code is equal to 1, display “title_1”.
If segmentation code is between 2 and 4, display “title_2”.
If segmentation code is between greater than 5, display “title_3”.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div style="text-align:left;display:block;font-size: 13px;padding:5px; padding-left:2px;height:45px;font-family:Nunito Sans;">
  <div ng-if="'{TagParam.language}' == 'CASTELLANO' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} == 1">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_1}">
  </div>
  <div ng-if="'{TagParam.language}' == 'CASTELLANO' && ({Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 2 && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} <= 4)">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_2_4}">
  </div>
  <div ng-if="'{TagParam.language}' == 'CASTELLANO' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 5">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_tile_5_15}">
  </div>

  <div ng-if="'{TagParam.language}' == 'CATALAN' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} == 1">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_1}">
  </div>
  <div ng-if="'{TagParam.language}' == 'CATALAN' && ({Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 2 && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} <= 4)">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_2_4}">
  </div>
  <div ng-if="'{TagParam.language}' == 'CATALAN' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 5">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_tile_5_15}">
  </div>

  <div ng-if="'{TagParam.language}' == 'VALENCIANO' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} == 1">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_1}">
  </div>
  <div ng-if="'{TagParam.language}' == 'VALENCIANO' && ({Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 2 && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} <= 4)">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_title_2_4}">
  </div>
  <div ng-if="'{TagParam.language}' == 'VALENCIANO' && {Model.MY_SEGMENTATION_V1.codigo_de_segmentacion} >= 5">
    <img src="{Model.MY_MLY_PRN_OFFER_CONTENT.segment_tile_5_15}">
  </div>
</div>